<script setup>
import { nextTick, onMounted, reactive, ref, watch } from 'vue';

defineProps({
  msg: {
    type: String,
    required: true
  }
})

// 生成响应式对象
// object = {name: "张三", age: 20}
var object = reactive({name: "张三", age: 20})

onMounted(() =>{
  // 修改了object这个响应式式对象, 这个对象并不会同步更新视图
  object.name = '李四'
  nextTick(() => {
      // 访问到已经挂载好的虚拟dom内的元素, 这个时候视图还没更新, 拿到的还是之前的值 张三
     const object_name = document.getElementById("object_name")
     console.log(object_name.innerText)
  })
  // 访问到已经挂载好的虚拟dom内的元素, 这个时候视图还没更新, 拿到的还是之前的值 张三
  // const object_name = document.getElementById("object_name")
  // console.log(object_name.innerText)
})

// 在模板中启用 v-focus
const vFocus = {
  // 直接调用该元素的focus方法
  mounted: (el) => el.focus()
}

// 生成响应式变量
// ref 生成出来的是个指针
const count = ref(0);
let disabledCount = ref(false)
const name_color = ref("black")
const showInput = ref(true)
const ULList = reactive(['Coffee', 'Tea'])
const username = ref("default")

const clieckHandler = () => {
  // 模板里 有VUE编译器, 编辑器会自动帮你补充vaule, 但是js里面 他不会
  count.value++
}

// 监听单个对象的变化单个 ref
watch(count, (newCount) => {
  console.log(`x is ${newCount}`)
  if (count.value > 10) {
    disabledCount.value = true
  }

  if (count.value == 6) {
    name_color.value="red"
  }

})

// xxx.SetName(name)    xxx.SetName = func(name)
// Setter: xxx.SetName = Seter func,   xxx.SetName = name ===> xxx.SetName(name) 
// Getter: xxx.GetName , xxx.GetName = Seter func, xxx.GetName ===> xxx.GetName()
// String
// Setter: xxx.Value = Seter func,   xxx.SetName = name ===> xxx.SetName(name) 
// Getter: xxx.Value , xxx.GetName = Seter func, xxx.GetName ===> xxx.GetName()

// 为什么需要使用 ref，reactive来声明对象, 以及声明后如何完成和UI的跟踪?
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
     <!-- :style="{ color: activeColor, fontSize: fontSize + 'px' }" -->
    <span> 名称: <span :style="{color: name_color}" id="object_name">{{ object.name }}</span>  年龄: {{ object.age }}</span>
    <br>
      <span> <button :id="object.name" :disabled="disabledCount" @click="clieckHandler">+1</button> {{ count }}</span>
      <br>
      // v-focus指令就是一个 对html元素进行特殊处理的一个函数, 参数就是需要被操作的元素本身
      用户名: <input v-model="username" v-if="showInput" id="username" v-focus type="text">
      <br>
      {{  username }}
      <br>
      <ul>
        // 通过For循环一次渲染出 多个li元素
        <li v-for="item in ULList" :key="item"> {{ item }} </li>
      </ul>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
